<template>
  <div id="blogContent">
    <!-- 容器 -->
    <el-container class="animate__animated animate__fadeIn ">

      <el-col :xs="(showCatalogue)?24:0" :sm="2">
        <div id="catalogue" style="background-color: skyblue" >
          <div class="BlogAnchor">
            <p>
              <b id="AnchorContentToggle" title="收起" style="cursor: pointer">目录▲</b>
            </p>
            <div class="AnchorContent" id="AnchorContent"></div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="22">
        <el-button class="catControl" style="position: fixed;z-index: 9999;right: 1px" @click="showCatalogue=!showCatalogue" plain><i class="el-icon-s-fold"></i>目录</el-button>
        <!-- 卡片容器 -->
        <el-card style="background-color: rgba(255, 255, 255,1)" class="first-card">

          <!-- 头部信息 -->
          <div slot="header" class="total blog-info">
            <!-- 用户信息部分 -->
            <div class="user-info">
              <el-avatar size="small" :src="author.avatar"></el-avatar>
              <a href="#" class="header">{{author.nickname}}</a>
            </div>
            <!-- 日期部分 -->
            <div class="blog-date">
              <i class="el-icon-date"></i>
              <span>{{blog.createTime | dataFormat}}</span>
            </div>
            <!-- 浏览量 -->
            <div>
              <i class="el-icon-view"></i>
              <span>{{blog.views}}</span>
            </div>
          </div>

          <div style="width: 100%;height: 100%;">
            <el-row>
              <el-col :xs="24" :sm="{span:6,offset:4}" align="center">
                <!-- 博客的封面 -->
                <el-image class="blog-pic" :src="firstPicUrl"></el-image>
              </el-col>

              <el-col :xs="24" :sm="14" class="myHeader" align="center">
                <!-- 内容主体 -->
                <!-- 文章标题 -->
                <h2 class="blog-title header">{{blog.title}}
                  <!-- 文章标签 -->
                  <el-tag effect="plain" type="warning" style="font-weight: bold; font-size: small; margin-left: 20px">
                    {{blog.flag}}
                  </el-tag>
                </h2>
              </el-col>
            </el-row>
          </div>
          <hr/>


          <!-- 文章内容显示部分 ：用 typo css 去渲染 还需安装组件 v-highlight 去渲染代码部分-->
          <div id="content" class="typo m-padded-lr-responsive m-padded-tb-large"
               v-html="htmlContent" v-highlight>
          </div>


          <!-- 将文章的标签进行输出 -->
          <div class="tags">
            <div class="tag-item" v-for="tag in blog.tags" :key="tag.id">
              <div class="sjx-outer">
                <div class="sjx-inner"></div>
              </div>
              <!-- 标签名字 -->
              <div class="tag">
                {{tag.name}}
              </div>
            </div>
          </div>

          <!--
          &lt;!&ndash; 赞赏模块 &ndash;&gt;
          <div class="appreciate">
            &lt;!&ndash; el-的弹出框 ，里面必须有一个 button 配套使用&ndash;&gt;
            &lt;!&ndash; 触发模式 - 弹出位置 - 标题 - 宽度 - 内容&ndash;&gt;
            <el-popover
                    trigger="hover"
                    placement="bottom"
                    width="300"
                    content="这是一段内容,这是一段内容。">

              &lt;!&ndash; 收款二维码部分 &ndash;&gt;
              <div class="give-money">
                &lt;!&ndash; 微信 &ndash;&gt;
                <div class="give-money-item">
                  <el-image :src="wechart" title="微信支付"></el-image>
                  <p>微信</p>
                </div>
                &lt;!&ndash; 支付宝 &ndash;&gt;
                <div class="give-money-item">
                  <el-image :src="alipay" title="支付宝支付"></el-image>
                  <p>支付宝</p>
                </div>
              </div>

              &lt;!&ndash; 按钮，用于激活弹窗的 &ndash;&gt;
              <el-button class="zanshang" slot="reference" type="danger" round plain>赞赏</el-button>
            </el-popover>
          </div>
          -->


          <!-- 卡片容器二，装评论区 -->
          <el-card shadow="never" class="comments">
            <!-- 卡片头部 -->
            <div class="header">
              评论区
            </div>

            <!-- 遍历每条新评论 -->
            <div v-for="cmt in rootCmtTree" :key="cmt.id">
              <!-- 利用组件进行显示 -->
              <!-- 评论组件 -- 新评论没有 parent0id-->
              <comment :cmt="cmt"
                       :parent-id="-1"
                       :rp-active-id="rpActiveId"></comment>

              <!-- 回复组件：每个评论组件都通过 rp-id 绑定一个回复组件，显示绑定的所有回复 -->
              <reply style="margin-left: 40px"
                     :blog-id="blog.id"
                     v-if="rpActiveId === cmt.id"
                     :pid="cmt.id"
                     v-on:quit="cancel"
                     v-on:newCmt="replyComp"></reply>

              <!-- 当前浏览用户，可点击选择该条评论进行回复 -->
              <span v-else class="reply"
                    @click="rpActiveId = cmt.id">回复</span>  <!-- 点击'回复' 时，将当前输入的 rp-id 与 cmt-id 进行绑定-->

              <!-- 如果是管理员，或者是自己的评论，则可以进行删除 -->
              <span v-if="administrator || userInfo && cmt.userId === userInfo.id"
                    class="delete"
                    @click="deleteComment(cmt.id)">删除</span>

              <!-- 回复区：带 margin ，进行嵌套+循环使用，这也是为什么用组件的原因-->
              <div style="margin-left: 40px" v-for="rp in cmt.children" :key="rp.id">
                <!-- 评论组件 -- 子评论有 parent-id, 就是当前 cmt 的 id-->
                <comment :cmt="rp" :parent-id="cmt.id" :rp-active-id="rpActiveId"></comment>
                <!-- 回复组件 -->
                <reply style="margin-left: 40px" v-if="rpActiveId === rp.id" :pid="rp.id" :blog-id="blog.id"
                       v-on:quit="cancel" v-on:newCmt="replyComp"></reply>

                <span v-else class="reply" @click="rpActiveId = rp.id">回复</span>
                <span v-if=" administrator || userInfo && rp.userId === userInfo.id" class="delete"
                      @click="deleteComment(rp.id)">删除</span>
              </div>
            </div>
          </el-card>


          <!-- 提交一条新评论的表单 -->
          <el-form class="commmet-reply" :model="commentForm" :rules="commentFormRules" ref="commentFormRef">
            <!-- 输入框 -->
            <el-form-item prop="content">
              <el-input v-model="commentForm.content" :validate-event="false" type="textarea"
                        class="write-commmet" :rows="6">
              </el-input>
            </el-form-item>
            <!-- 提交按钮 -->
            <div class="submit">
              <el-button prefix-icon="el-icon-submit" type="primary" class="item" @click="submit()">
                <i class="el-icon-circle-check"></i> 提交
              </el-button>
            </div>
          </el-form>
        </el-card>
      </el-col>

    </el-container>
  </div>
</template>


<script>
    import Prism from "../../plugins/prism"
    import Login from "../login/Login";
    import Comment from "../comment/Comment";
    import Reply from "../comment/Reply";
    import {mapState} from 'vuex'
    import RightSide from "./RightSide";

    function testFun() {
      //console.log(document.getElementById("content"))
      //是否显示导航栏
      var showNavBar = true;
      //是否展开导航栏
      var expandNavBar = true;
      //是否给标题自动增加序号
      var addSNToTitle = false;
      $(document).ready(function(){
        var h1s = $("div#content").find("h1");
        var h2s = $("div#content").find("h2");
        var h3s = $("div#content").find("h3");
        var h4s = $("div#content").find("h4");
        var h5s = $("div#content").find("h5");
        var h6s = $("div#content").find("h6");

        var headCounts = [h1s.length, h2s.length, h3s.length, h4s.length, h5s.length, h6s.length];
        var vH1Tag = null;
        var vH2Tag = null;
        var vH3Tag = null;
        var vH4Tag = null;
        var vH5Tag = null;
        var vH6Tag = null;

        if(headCounts.length==0){
          return;
        }
        for(var i = 0; i < headCounts.length; i++){
          if(headCounts[i] > 0){
            if(vH1Tag == null){
              vH1Tag = 'h' + (i + 1);
            }else if(vH2Tag == null){
              vH2Tag = 'h' + (i + 1);
            }else if(vH3Tag == null){
              vH3Tag = 'h' + (i + 1);
            }else if(vH4Tag == null){
              vH4Tag = 'h' + (i + 1);
            }else if(vH5Tag == null){
              vH5Tag = 'h' + (i + 1);
            }else if(vH6Tag == null){
              vH6Tag = 'h' + (i + 1);
              break;
            }
          }
        }
        /*
        $("div#catalogue").prepend(
                '<div class="BlogAnchor">' +
                // 关闭按钮
                // '<span style="color:red;position:absolute;top:-6px;left:0px;cursor:pointer;" onclick="$(\'.BlogAnchor\').hide();">×</span>' +
                '<p>'  +
                '<b id="AnchorContentToggle" title="收起" style="cursor:pointer;">目录▲</b>' +
                '</p>' +
                '<div class="AnchorContent" id="AnchorContent"> </div>' +
                '</div>' );
        */
        var vH1Index = 0;
        var vH2Index = 0;
        var vH3Index = 0;
        var vH4Index = 0;
        var vH5Index = 0;
        var vH6Index = 0;

        $("div#content").find(
                vH1Tag +(vH2Tag != null ? (','+ vH2Tag) : '')
                +(vH3Tag != null ? (','+ vH3Tag) : '')
                +(vH4Tag != null ? (','+ vH4Tag) : '')
                +(vH5Tag != null ? (','+ vH5Tag) : '')
                +(vH6Tag != null ? (','+ vH6Tag) : '')
        ).each(function(i,item){
          var id = '';
          var name = '';
          var tag = $(item).get(0).tagName.toLowerCase();
          var className = '';
          if(tag == vH1Tag){
            if(addSNToTitle){
              id = name = ++vH1Index;
            }else {
              id = ++vH1Index;
            }
            vH2Index = 0;
            className = 'item_h1';
          }else if(tag == vH2Tag){
            id = vH1Index + '_' + ++vH2Index;
            name = vH1Index + '.' + vH2Index;
            className = 'item_h2';
          }else if(tag == vH3Tag){
            id = vH1Index + '_' + vH2Index + '_' + ++vH3Index;
            name = vH1Index + '.' + vH2Index+ '.'+ vH3Index;
            className = 'item_h3';
          }else if(tag == vH4Tag){
            id = vH1Index + '_' + vH2Index + '_' + vH3Index + '_' + ++vH4Index;
            name = vH1Index + '.' + vH2Index+ '.'+ vH3Index + '.' + vH4Index;
            className = 'item_h4';
          }else if(tag == vH5Tag){
            id = vH1Index + '_' + vH2Index + '_' + vH3Index + '_' + vH4Index + '_' + ++vH5Index;
            name = vH1Index + '.' + vH2Index+ '.'+ vH3Index + '.' + vH4Index + '.' + vH5Index;
            className = 'item_h5';
          }else if(tag == vH6Tag){
            id = vH1Index + '_' + vH2Index + '_' + vH3Index + '_' + vH4Index + '_' + vH5Index + '_' + ++vH6Index;
            name = vH1Index + '.' + vH2Index+ '.'+ vH3Index + '.' + vH4Index + '.' + vH5Index + '.' + vH6Index;
            className = 'item_h6';
          }

          $(item).attr("id","wow" + id);
          $(item).addClass("wow_head");
          var originText = $(item).text();
          if(originText.length>15){
            originText=originText.substring(0,15)+'…';
          }

          $("#AnchorContent").css('max-height', ($(window).height() - 180) + 'px');
          if(addSNToTitle){
            $(item).text(name + '. ' + originText);
            $("#AnchorContent").append('<li><a class="nav_item '+className+' anchor-link" onclick="return false;" href="#" link="#wow'+id+'">'+name+" · "+originText+'</a></li>');
          }else {
            $("#AnchorContent").append('<li><a class="nav_item '+className+' anchor-link" onclick="return false;" href="#" link="#wow'+id+'">'+originText+'</a></li>');
          }
        });

        $("#AnchorContentToggle").click(function(){
          var text = $(this).html();
          if(text=="目录▲"){
            $(this).html("目录▼");
            $(this).attr({"title":"展开"});
          }else{
            $(this).html("目录▲");
            $(this).attr({"title":"收起"});
          }

          $("#AnchorContent").toggle();
        });

        $(".anchor-link").click(function(){
          $("html,body").animate({scrollTop: $($(this).attr("link")).offset().top}, 500);
        });

        var headerNavs = $(".BlogAnchor li .nav_item");
        var headerTops = [];
        $(".wow_head").each(function(i, n){
          headerTops.push($(n).offset().top);
        });

        $(window).scroll(function(){
          var scrollTop = $(window).scrollTop();
          $.each(headerTops, function(i, n){
            var distance = n - scrollTop;
            if(distance >= 0){
              //console.log("  distance  "+distance+'   ' + i+'  '+ n);
              $(".BlogAnchor li .nav_item.current").removeClass('current');
              $(headerNavs[i]).addClass('current');
              return false;
            }
          });
        });

        if(!showNavBar){
          $('.BlogAnchor').hide();
        }

        if(!expandNavBar){
          $(this).html("目录▼");
          $(this).attr({"title":"展开"});
          $("#AnchorContent").hide();
        }
      });

    }

    export default {
      components: {
        RightSide,
        Login, Prism, Comment, Reply
      },
      data() {
        return {
          /* blog 对象 */
          blog: {},
          /* 作者 对象 */
          author:{},
          /* 评论的回复表单 */
          replyForm: {
            content: ''
          },
          /* 评论的回复表单规则 */
          replyFormRules: {
            content: [
              {required: true, message: "评论内容不能为空！"},
              {min: 0, max: 100, message: "评论内容不超过100字！"}
            ]
          },
          /* 当前这条回复，绑定的cmt */
          rpActiveId: -1,
          /* 当前博客的 id */
          blogId: 0,
          /* 收款码 */
          wechart: require("@/assets/logo.png"),
          alipay: require("@/assets/logo.png"),
          /* 评论表单 */
          commentForm: {
            content: ''
          },
          /* 评论表单规则 */
          commentFormRules: {
            content: [
              {required: true, message: "评论内容不能为空！"},
              {min: 0, max: 100, message: "评论内容不超过100字！"}
            ]
          },
          /* 是否已登录，是否弹消息提示 */
          loginDialogFormVisible: false,
          /* 评论树 */
          rootCmtTree: [],
          firstPicUrl:'',
          htmlContent:'',
          showCatalogue:false,  //分辨率小时，是否展开目录,
          screenWidth:document.body.clientWidth
        }
      },
      created() {
        /* 初始化内容 */
        this.getBlogInfomation();
      },
      computed: {
        ...mapState([
          'userInfo',
          'administrator',
        ])
      },
      watch: {
        '$route' (to, from) {
          this.$router.go(0);
        }
      },
      methods: {
        // 获取博客详情信息
        async getBlogInfomation() {
          let targetDiv = document.getElementById('blogContent');
          let loadingInstance = this.$loading({fullscreen:true,text:'加载中',target:targetDiv})
          const {data: res} = (await this.$blog.get(`/details`,{
            params:{
              'id':this.$route.query.id
            }
          })).data
          if(res !== null){
            loadingInstance.close()
          }
          this.blog = res.blog
          //将 md 格式转 html
          this.htmlContent = this.$marked(this.blog.content);
          testFun();
          setTimeout(() =>{
            let htmlContent = document.getElementById('catalogue').innerHTML
            //console.log(htmlContent)
          },50);
          this.author = res.user
          //此处先进行赋值！否则由于是异步方法，可能会渲染不上
          this.firstPicUrl = this.blog.firstPicture
          /* 从路由跳转携带的参数，获取当前博客的 id */
          this.blogId = this.$route.query.id

          /* 父评论结点初始化，先按回复时间排序一下，筛选条件：没有父结点的 */
          let parents = res.comments.filter(value => value.parentCommentId === null).sort((a, b) => {
            return a.createTime.localeCompare(b.createTime)
          })

          /* 先获取所有的子评论结点，筛选条件：有父结点的 */
          let children = res.comments.filter(value => value.parentCommentId !== null)

          /* 定义 translator 方法 */
          /* 将子评论与父评论进行对应绑定*/
          let translator = (parents, children) => {
            parents.forEach(parent => {
              children.forEach((child, index) => {
                if (child.parentCommentId === parent.id) {
                  /* 唯一标识父节点的，只有名字了，后续其父子关系会被抹除 */
                  child.pname = parent.nickname
                  let temp = JSON.parse(JSON.stringify(children))
                  translator([child],temp)
                  typeof parent.children != 'undefined' ? parent.children.push(child) : parent.children = [child]
                }
              })
            })
          }
          /* 调用 translator 方法 */
          translator(parents, children)

          /* 为了排版简介，不管三七二十一，把所有子辈结点，都当成儿子结点，方便输出 */
          let getChildList = (children) => {
            let cds = []
            let dfs = (children) => {
              if (children === undefined) return
              children.forEach((child) => {
                cds.push(child)
                if (child.children === undefined) return
                dfs(child.children)
              })
            }
            dfs(children)
            return cds.sort((a, b) => {
              return a.createTime.localeCompare(b.createTime)
            })
          }
          parents.forEach((parent) => {
            parent.children = getChildList(parent.children)
          })

          this.rootCmtTree = parents

          /* 将得到的所有父节点，绑定到根结点 */
          this.rootCmtTree = parents

          /* 方法超时时间 */
          setTimeout(() => {
            Prism.highlightAll()
          }, 0)
          this.firstPicUrl = this.blog.firstPicture
        },

        /* 回复评论 */
        replyComp(val) {
          /* 弹窗提示 */
          this.$message({message: "评论发表成功", type: 'success', offset: 80});
          this.rpActiveId = -1
          /* 刷新评论区 */
          this.getBlogInfomation()
        },

        /* 取消 */
        cancel(val) {
          // console.log(val)
          this.rpActiveId = val
        },


        /* 新评论提交 */
        async submit() {
          let comment = {}
          comment.content = this.commentForm.content
          comment.blogId = this.blog.id

          if (this.$store.state.userInfo === null) {
            //未登录，则需先登录再评论
            this.$store.commit('showLFV')
          } else {
            comment.userId = this.$store.state.userInfo.id
            comment.email = this.$store.state.userInfo.email
            comment.avatar = this.$store.state.userInfo.avatar
            comment.nickname = this.$store.state.userInfo.nickname
            comment.adminComment = this.$store.state.administrator

            const {data: res} = await this.$basic.post('/comment/save',comment)
            if (res.code === 200) {
              this.getBlogInfomation()
              this.$message({message: "评论发布成功！", type: 'success', offset: 80});
            } else {
              this.$message({message: "评论发布失败！", type: 'error', offset: 80});
            }
          }
        },


        // 删除评论
        async deleteComment(id) {
          const {data: res} = await this.$basic.get(`/comment/delete`,{
            params:{
              'id':id
            }
          })

          if (res.code === 200) {
            this.getBlogInfomation()
            this.$message({message: '删除评论成功！', type: 'success', offset: 80});
          } else {
            this.$message({message: "删除评论失败！", type: 'error', offset: 80});
          }
        }
      }
    }
</script>

<style scoped lang="less">

  #content{
    font-size: 15px;
  }

  img{
    border: 10px solid black;
  }

  .el-card {
    width: 100%;
  }

  .el-popper /deep/ {
    box-shadow: 0 2px 4px 0 rgb(34 36 38 / 12%),
  }

  .first-card {
    border-radius: 10px 10px 0 0;
    position: relative;
    padding-bottom: 100px;
    /*text-align: center;*/
    font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;

    .blog-pic {
      border-radius: 8px;
    }
  }

  hr.style-one {
    width: 100%;
    background-image: linear-gradient(to right, rgba(64, 158, 255, 0), rgba(64, 158, 255, 0.75), rgba(64, 158, 255, 0));
  }

  .commmet-reply {
    position: relative;

    .auth-info {
      position: absolute;
      left: 0;
    }

    .submit {
      text-align: center;
    }

  }

  .appreciate {
    text-align: center;
  }

  .give-money {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 1px solid #409eff;
    border-radius: 10px;

    .give-money-item {
      border-radius: 10px;
      padding: 10px;
      width: 50%;
      text-align: center;

      .el-image {
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-left: 5px;
        margin-right: 5px;
      }

      p {
        font-size: smaller;
        font-weight: bold;
        color: #3a8ee6;
        display: block;
        line-height: 20px;
        margin: 0;
      }
    }
  }

  .tags {
    display: flex;
    align-items: center;
    margin-left: 50px;
  }

  .tag-item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-left: 10px;
    margin-bottom: 20px;
  }

  .tag {
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
    background-color: #ecf5ff;
    border: 1px solid #409eff;
    color: #409eff;
    display: flex;
  }

  .sjx-outer {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid #409eff;
    position: relative;
  }

  .sjx-inner {
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid #ecf5ff;
    top: -7px;
    left: 1px;
    position: absolute;
  }

  .author {
    text-align: left;
    background-color: #88c3ff;
    box-shadow: 0 0 0 1px #a3c293 inset;
    color: #2c662d;
    width: 100%;
    position: absolute;
    left: 0;
    margin: 20px 0 0;
    padding: 20px 0;
    font-size: small;
    font-family: PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
  }

  .comments {
    margin-top: 150px;
    box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
    border: 1px solid rgba(34, 36, 38, .15);
    border-top: 2px solid #409EFF;
    text-align: left;
    background-color: #a7d0fb;

    .reply {
      margin-left: 40px;
      font-size: 12px;
      color: rgba(0, 0, 0, .5);
      color: #3a8ee6;
    }

    .reply:hover {
      color: rgba(0, 0, 0, 1);
      cursor: pointer;
    }

    .delete {
      margin-left: 10px;
      font-size: 12px;
      color: rgba(0, 0, 0, .5);
    }

    .delete:hover {
      color: rgba(0, 0, 0, 1);
      cursor: pointer;
    }


    .header {
      font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
      font-weight: 700;
      font-size: 1.28571429rem;
      color: rgba(0, 0, 0, .87);
    }

  }


  .write-commmet {
    margin-top: 20px;
  }

  .blog-pic {
    width: 100%;
  }

  .blog-title {
    text-align: center;
  }

  .blog-info {
    display: flex;
    align-items: center;
    color: rgba(0, 0, 0, .4);
    font-size: 13px;

    .blog-date {
      margin-right: 5px;
    }

    .user-info {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-right: 15px;

      .el-avatar {
        margin-right: 5px;
        width: 22px;
        height: 22px;
      }

      .header {
        text-decoration: none;
        color: #3a8ee6;
        font-weight: bold;
      }
    }
  }

  .myHeader{
    padding-top: 8%;
  }

  .catControl{
    display: none;
  }

  @media screen and (max-width: 768px) {
    .BlogAnchor{
      left: 80px;
    }

    #content{
      font-size: 10px;
    }

    .catControl{
      display: block;
    }

    .myHeader{
      padding-top: 0;
    }

    .tags {
      margin-left: 0;
    }

    hr {
      display: none;
    }

    .comment-content {
      font-size: 12px !important;
    }
  }

  @media only screen and (max-width: 480px) {

    h2 {
      font-weight: normal;
    }

    code, pre {
      font-size: 13px !important;
    }
  }
</style>

<style>
  /*导航*/
  .BlogAnchor {
    background: white;
    padding: 10px;
    line-height: 150%;
    border: 1px solid #5F8CA6;
    width: 250px;
    opacity: 0.9;
    border-radius: 30px;
    position: fixed;
    left: 5%;
    z-index: 9999;
  }
  .BlogAnchor p {
    font-size: 18px;
    color: #5F8CA6;
    margin: 0 0 0.3rem 0;
    text-align: right;
  }
  .BlogAnchor .AnchorContent {
    padding: 5px 0px;
    overflow: auto;
  }
  .BlogAnchor li{
    text-indent: 0.5rem;
    font-size: 14px;
    list-style: none;
  }
  .BlogAnchor li .nav_item{
    padding: 3px;
  }
  .BlogAnchor li .item_h1{
    margin-left: 0rem;
  }
  .BlogAnchor li .item_h2{
    margin-left: 1rem;
    font-size: 0.8rem;
  }
  .BlogAnchor li .item_h3{
    margin-left: 2rem;
    font-size: 0.8rem;
  }
  .BlogAnchor li .item_h4{
    margin-left: 3rem;
    font-size: 0.8rem;
  }
  .BlogAnchor li .item_h5{
    margin-left: 4rem;
    font-size: 0.8rem;
  }
  .BlogAnchor li .item_h6{
    margin-left: 5rem;
    font-size: 0.8rem;
  }
  .BlogAnchor li .nav_item.current{

  }
  #AnchorContentToggle {
    font-size: 12px;
    font-weight: normal;
    color: #FFF;
    display: inline-block;
    line-height: 20px;
    background: #5F8CA6;
    font-style: normal;
    padding: 1px 8px;
  }
  .BlogAnchor a:hover {
    color:#5F8CA6;
    text-decoration: underline;
  }
  .BlogAnchor a {
    text-decoration: none;
    color: #00a9e5;
  }

  .BlogAnchor .item_h1{
    color: #409EFF ;
    font-weight: bold;
  }
</style>
